<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8";http-equiv="Content-Type" content="text/html">
		<title>Music</title>
		<link type="text/css" rel="stylesheet" href="playlist.css">
		<link type="text/css" rel="stylesheet" href="index.css">
		<link type="text/css" rel="stylesheet" href="recommend.css" />
		<link href="startstopgallery.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
	</head>
	<body>
		<!--头部-->
		<div id="header">
			<div class="nav_topbar">
			    <div class="nav_topbar_cont">
			        <ul>
			        	<li><a href="#">我的主页</a></li>
			        <li><a href="#">个人中心</a>
			        		</li><li><a href="#">帮助中心</a></li>
			        </ul>
			        <a class="user_login" href="#"><em></em>用户登录<i class="arrow"></i></a>
					<div style="display:none;" class="user_login_box">
					    <p class="shadow_cover"></p>
					    <div class="user_login_inner">
					        <form class="signin_form"> 
					            <input class="ipt" type="text" value="用户名" name="log"> 
					            <input class="ipt" type="password" value="密码" name="pwd"> 
					            <input name="rememberme" id="rememberme" checked="checked" value="forever" type="checkbox">记住密码
					            <input class="login_btn" type="submit" name="submit" value="登录">
					        </form>
					        <p> 
					            <a href="#"><i class="sign"></i>注册</a> | 
					            <a href="#"><i class="lock"></i>忘记密码？</a>
					        </p>
					    </div>
					</div>
			    </div>
			</div>
		</div>
		<div id="headCont">
		    <div class="main_nav">
		        <div class="logo"><a href="#"><img src="images/logo.jpg" width="192"alt="logo"></a></div>
		        <div class="logoName">
		        	<a href="#"></a>
		        </div>
		        <ul class="navigation" id="main_nav">
					<li>
		            	<a href="index.html" class=""><span>音乐馆</span><span>音乐馆</span></a>
		            </li>
		            <li>
		            	<a href="recommend.html" class=""><span>推荐</span><span>推荐</span></a>
		            </li>
					<li>
						<a href="playlist.html" class="on"><span>分类歌单</span><span>分类歌单</span></a>
					</li>
		            <li>
		            	<a href="mv.html" class=""><span>MV</span><span>MV</span></a>
		            </li>
		            <li>
		            	<a href="my-music.html" class=""><span>我的音乐</span><span>我的音乐</span></a>
		            </li>	 
		        </ul>
		        <div class="user_info">
					<div class="user_photo"><a href="#"><img src="images/tx.jpg" width="40px"; hheight="40px";></a></div>
		            <a class="nikeName" href="#">£夕颜</a>
		            <a class="user_info_list" href="#"><span>34</span><span>歌单</span></a>
		            <a class="user_info_list" href="#"><span>8</span><span>收听</span></a>
		            <a class="user_info_list" href="#"><span>20</span><span>喜欢</span></a>
		        </div>
		    </div>
			<nav class="sub_nav">
				<div class="nav_list" style="margin-right: -100px;">
					<ul>
					    <li><a href="#" class="home">流行</a></li> 
						<li><a href="#" class="">摇滚</a></li> 
						<li><a href="#" class="">说唱</a></li> 
						<li><a href="#" class="">R&B</a></li> 
						<li><a href="#" class="">中国风</a></li> 
						<li><a href="#" class="">轻音乐</a></li>    
					    <!--搜索框-->
					    <div class="search_box">
					        <form role="search" method="get" id="searchform" class="searchform" action="#">
					    		<input type="submit" value="" class="search_btn" id="searchsubmit">
					    		<input type="text" class="search" value="搜索好音乐" name="s" id="s">
					    	</form>
					    </div> 
					</ul>
				</div>
			</nav>
		</div>
		<div class="wrap">
			<div class="h-bg">
			<div class="header">
				<div class="header-top">
					<div class="enter">
						<a href="#">流行音乐</a> | <a href="#">pop music</a>
					</div>
					<div class="nav-wrap">
							<ul class="group" id="example-one">
							        <li><a href="#">下载</a></li>
							        <li><a href="#">收藏</a></li>
							  		<li class="current_page_item"><a href="#">喜欢</a></li>
							  		<li><a href="#">分享</a></li>
							  </ul>
					</div>
					<div class="clear"></div> 
				</div>
				<div class="header-bot">
					<div class="logo">
						<a href="index.html"><img src="images/logo1.jpg" height="60" width="160" alt=""></a>
					</div>
					<div class="search-bar">
						<a href="#"><img src="./images/ssk.png" style="margin-top: -40px;" /></a>
					</div>
				</div>
			</div>
			<div class="main">
					<div class="content-bottom">			
						<div class="leftsidebar span_3_of_1" style="margin-left: -50px; margin-top: -20px;">
							<h3>流行音乐</h3>
							<div class="sidebar-nav">
				                <ul>
				                   <li><a href="">천둥벌거숭이</a></li>
				                    <li><a href="">Summer Hate (Feat. 비)</a></li>
				                    <li><a href="">此生过半（完整版）</a></li>
				                    <li><a href="">国王与乞丐</a></li>
				                    <li><a href="">Waiting For Love</a></li>
				                    <li><a href="">Coincidance</a></li>
				                    <li><a href="">天外来物</a></li>
				                    <li><a href="">句号</a></li>
				                    <li><a href="">남겨짐에 대해 (Feat. 다운) </a></li>
				                    <li><a href="">오만과 편견</a></li>
				                    <li><a href="">危险派对</a></li>
				                    <li><a href="">죽도록 사랑해 (Feat. Soul Dive)</a></li>
				                    <li><a href="">Magic Trick</a></li>
				                    <li><a href="">给不了你未来</a></li>
									<li><a href="">One-man show (Feat. Sik-K)</a></li>
									<li><a href="">好想爱这个世界啊（Live）</a></li>
				                </ul>
				              </div>
		 				</div>	
					</div>
					<div class="content span_1_of_2" style="margin-left: 240px; margin-top: -750px; width: 800px;">
					  <div class="right-bottom1">
							<div class="grid_1_of_4 images_1_of_5">
								<div class="grid1-img">
								  <a href="single.html"><img src="images/pic1.png" width="210" width="210" alt=""/></a>
								 <div class="price-list">
								 	<h3><a href="#">情绪放映厅 </h3></a>
								 <div class="price">
									<span class="price-new">喜欢</span> 
								</div>
								<div class="cart">
									<a data-id="43;" class="button addToCart"><span>call</span></a>
									<div class="details-list">
										<a href="" class="details"></a>
										<a class="wish" title="Add to Wish List" onclick="addToWishList('43');"></a>
									</div>
								</div>
							    <div class="clear"></div>
								</div> 
							 </div>
						</div>
						<div class="grid_1_of_4 images_1_of_5">
								<div class="grid1-img">
								  <a href="single.html"><img src="images/pic2.png" width="210" width="210" alt=""/></a>
								 <div class="price-list">
								 	<h3><a href="#">共创宝藏！</h3></a>
								 <div class="price">
									<span class="price-new">喜欢</span> 
								</div>
								<div class="cart">
									<a data-id="43;" class="button addToCart"><span>call</span></a>
									<div class="details-list">
										<a href="" class="details"></a>
										<a class="wish" title="Add to Wish List" onclick="addToWishList('43');"></a>
									</div>
								</div>
							    <div class="clear"></div>
								</div> 
							 </div>
						</div>
						<div class="grid_1_of_4 images_1_of_5">
							 <div class="grid1-img">
									  <a href="single.html"><img src="images/pic3.png" width="210" width="210" alt=""/></a>
									 <div class="price-list">
									 	<h3><a href="#">薛之谦综艺歌曲</h3></a>
										 <div class="price">
											<span class="price-new">喜欢</span> 
										</div>
										<div class="cart">
											<a data-id="43;" class="button addToCart"><span>call</span></a>
											<div class="details-list">
												<a href="" class="details"></a>
												<a class="wish" title="Add to Wish List" onclick="addToWishList('43');"></a>
											</div>
										</div>
								    <div class="clear"></div>
									</div> 
								 </div>
							</div>
						<div class="clear"></div> 
					</div>
				 <div class="right-bottom1">
							<div class="grid_1_of_4 images_1_of_5">
								<div class="grid1-img">
								  <a href="single.html"><img src="images/pic4.png" width="210" width="210" alt=""/></a>
								 <div class="price-list">
								 	<h3><a href="#">【冬日限定】</h3></a>
								 <div class="price">
									<span class="price-new">喜欢</span> 
								</div>
								<div class="cart">
									<a data-id="43;" class="button addToCart"><span>call</span></a>
									<div class="details-list">
										<a href="" class="details"></a>
										<a class="wish" title="Add to Wish List" onclick="addToWishList('43');"></a>
									</div>
								</div>
							    <div class="clear"></div>
								</div> 
							 </div>
						</div>
						<div class="grid_1_of_4 images_1_of_5">
								<div class="grid1-img">
								  <a href="single.html"><img src="images/pic5.png" width="210" width="210" alt=""/></a>
								 <div class="price-list">
								 	<h3><a href="#">冬日许愿瓶</h3></a>
								 <div class="price">
									<span class="price-new">喜欢</span> 
								</div>
								<div class="cart">
									<a data-id="43;" class="button addToCart"><span>call</span></a>
									<div class="details-list">
										<a href="" class="details"></a>
										<a class="wish" title="Add to Wish List" onclick="addToWishList('43');"></a>
									</div>
								</div>
							    <div class="clear"></div>
								</div> 
							 </div>
						</div>
						<div class="grid_1_of_4 images_1_of_5">
							<div class="grid1-img">
								<a href="single.html"><img src="images/pic6.png" width="210" width="210" alt=""/></a>
								    <div class="price-list">
								     	<h3><a href="#">ZICO</h3></a>
								     <div class="price">
								    	<span class="price-new">喜欢</span> 
								    </div>
								    <div class="cart">
								    	<a data-id="43;" class="button addToCart"><span>call</span></a>
								    	<div class="details-list">
								    		<a href="" class="details"></a>
								    		<a class="wish" title="Add to Wish List" onclick="addToWishList('43');"></a>
								    	</div>
								    </div>
								    <div class="clear"></div>
								</div> 
							</div>
						</div>
					<div class="clear"></div> 
				</div>
			    </div>
		     </div>
		   </div>
		</div>
		<div class="fot" style="margin-top: 250px;">
			<div class="footer">Copyright © Your Website.com.  All rights reserved. Privacy Policy.<br />
		</div>
		</div>
	</body>
</html>
